<template>
	<view class="content">
      <!--  <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in imgList" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper> -->
      <!--  <view class="swiper" >
            <image v-if="detail.img_url" :src="$domain.api+detail.img_url" mode=""></image>
        </view> -->
        <view class="justify-between header">
           <view class="">
                <view class="statusText">
                    {{detail.status==3?'已取消':'报名中'}}
                </view>
                <view class="" v-if="detail.status<3">
                  您发起的擂台正在报名中，请您多关注! 
                </view>
                <view class=""v-if="detail.status<3">
                 开始时间：{{detail.addtime||'暂无开始时间'}}
                </view>
           </view> 
           <image src="/static/images/my/Bmimg.png" mode="widthFix"></image>
        </view>
        <view class="plr16 ">
             <view class="bgWhite radius6  ptb15 mb20 mt15  ft14 ">
                 <view class="mlr15 justify-between align-center">
                     <view class="moduleTitle">我的擂台信息 </view>
                     <text class="">{{detail.status=='1'?'已应约':'未报名'}}</text>
                 </view>
                 <uv-line></uv-line>
                 <view class="mlr15 mt15">
                     城市：{{detail.area_name}}
                 </view>
                 <view class="mlr15 mt15">
                     擂台名称：{{detail.title}}
                 </view>
                 <view class="mlr15 mt15">
                     擂台类型：{{detail.label_name}}
                 </view>
                 <view class="mlr15 mt15">
                     开擂人数：{{detail.num}}
                 </view>
                 <view class="mlr15 mt15">
                     擂台段位：{{detail.level}}段
                 </view>
                 <view class="mlr15 mt15">
                     备注：{{detail.beizhu||''}}
                 </view>
                <view class="mlr15 mt15 progessBox justify-between align-center">
                    <uv-line-progress inactiveColor="rgba(0,197,132,0.3);" :showText="false" :percentage="computedNums()" activeColor="#00C584"></uv-line-progress>
                    <text class="ml10">还差{{nums}}人成擂</text>
                </view>
                <view class="mlr15 moduleTitle moduleBefore"> <text class="ml15 box"></text> 报名人 </view>
                <view v-if="joinList.length" class="align-center mlr15 mt15" v-for="(i,n) in joinList" :key="n">
                    <image src="" style="width: 47rpx;height: 47rpx;border-radius: 50%;" mode=""></image>
                    <text style="margin: 0 50rpx 0 20rpx;" >昵称：{{i.nickname}}</text>
                    <text> 电话： {{i.mobile}}</text>
                </view>
             </view>   
			   
            
        </view>
     
	
        <view class=" bgWhite paybtn">
            <view class="justify-between align-center">
                <view class="align-center justify-between flex1">
                   <view class="flex-col align-center" @click="$utils.toHome()">
                       <image src="../../static/images/index/tabBar1.png" mode="widthFix"></image>
                       首页
                   </view>
                   <button style="line-height: 1.2; font-size: 24rpx;" open-type="contact" @contact="contact" class="flex-col align-center">
                       <image src="../../static/images/middle/chat.png" mode="widthFix"></image>
                       客服
                   </button>
                </view>
                    <view class="payright align-center" >
                            <view @click="toApply()" class="onlinePay">取消擂台</view>
                    </view>
            </view>
        </view>	
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},
                current:0,
                timeInfo:{},
                week:['周一','周二','周三','周四','周五','周六','周日'],
                openid:"",
				form:{},
				couponPrice:"请选择",
				userInfo:uni.getStorageSync('userInfo'),
				couponList:[],
				coupon_id:'',
				id:"",
                joinList:[]
			}
		},
		
		onLoad(opt) {
               if(opt.id) this.id = opt.id
			   this.getDetail()
                // this.$refs.choseCoupon.open()
		},
        computed:{
                nums(){
                    return this.detail.num- this.detail.join_num  
                }
        },
		methods: {
        
				computedNums(){
				       let num  = ( ( this.detail.join_num/ this.detail.num)*100).toFixed(0)
				        return  Number(num)
				},
			getDetail(){
				this.$api.myArenaDetail({id:this.id}).then(res=>{
					console.log(res)
                    this.detail = res.item
                    this.joinList = res.joinList
				})
				
			},
			
          
            toApply() {
                let vm =this
                    uni.showModal({
                        title:'提示',
                        content:'确定要取消该擂台吗',
                        success:function(res){
                            if(res.confirm){
                                    vm.$api.cancelArena({id:vm.id}).then(res=>{
                                       uni.showToast({
                                           title:'取消成功',
                                           icon:'none'
                                       })
                                       uni.navigateBack()
                                    })
                            }
                            
                        }
                    })
            },
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding:50rpx 30rpx 0;
		font-size: 26rpx;
		color: #fff;
        background-color: #00C584;
	}
    .header image{
        margin-left: 30rpx  ;
        width: 216rpx;
    }
    .statusText{
        font-weight: bold;
        font-size: 40rpx;
    }
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
   .paybtn{
       box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(29,29,38,0.09);
       position: fixed;
       bottom: 0;
       width: 100%;
       padding: 20rpx 30rpx;
       background-color: #fff;
       font-weight: 500;
       font-size: 24rpx;
       color: #222222;
       .payright{
           margin-left: 40rpx;
           view{
               width:466rpx;
               height: 84rpx;
               border-radius: 50rpx ;
               color: #fff;
               line-height: 84rpx;
               font-size: 30rpx;
               text-align: center;
               font-weight: bold;
               background-color: #343434;
           }
           .onlinePay{
             border-radius: 50rpx ;
               background: #01C588;
               color: #fff;
               
           }
       }
       
       image{
           width: 44rpx;
       }
    
     
   }
   .save_btn {
   	width: 100%;
   	height: 90rpx;
   	margin-top: 52rpx;
   	margin-bottom: 40rpx;
   	background: #2CC6A1;
   	border-radius: 8rpx;
   	font-size: 32rpx;
   	color: #FFFFFF;
   	text-align: center;
   	line-height: 90rpx;
   }
    .moduleTitle{
        font-weight: 600;
        color: #000000;
        line-height: 54rpx;
        font-size: 32rpx;
        margin: 30rpx 0 10rpx;
    }
    .moduleTitle .box{
        width: 8rpx;
        height: 29rpx;
        background: #01C588;
        border-radius: 4rpx;
        display: inline-block;
        margin-right: 10rpx;
    }
    
    .swiper{
        image{
            width: 100%;
            height: 300rpx;
        }
    }
    .info{
        image{
            width: 240rpx;
            height: 180rpx;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            margin-right: 38rpx;
        }
        .name{
            color: #3D3D3D;
            font-weight: 500;
        }
            
        .address{
            color: #9F9F9F;
        }
    }
    .timeBox{
        color: #3D3D3D;
    }
	.artItem {
	    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.0612);
	    font-size: 24rpx;
	    border-radius: 16rpx 16rpx 16rpx 16rpx;
	    margin-bottom: 36rpx;
	        font-size: 24rpx;
	        color: #666666;
	    .left{
	        width: 224rpx;
	        height: 180rpx;
	        background: #FFF2F2;
	        border-radius: 12rpx 12rpx 12rpx 12rpx;
	    }
	    .desc{
	       font-weight: 600;
	       font-size: 32rpx;
	       color: #E6220A; 
	    }
	    .name{
	   font-weight: 600;
	   font-size: 64rpx;
	   color: #E6220A;
	    }
	}
	.service{
	    width: 140rpx;
	    height: 66rpx;
	    background: #E6220A;
	    color: #fff;
	    text-align: center;
	    font-size: 32rpx;
	    line-height: 66rpx;
	    border-radius: 60rpx 60rpx 60rpx 60rpx;
	    margin-right: 20rpx;
	}
    .progessBox{
        width: 637rpx;
        height: 60rpx;
        background-color: #D9F6ED;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #00C584;
        padding: 0 20rpx;
    }
</style>